<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>我的年龄:{{age}}</p>
        <input type="text" v-model='age'>
        <hr>
        <p>你的颜值:{{colorVal}}</p>
        <button @click='beBeautiful'>变漂亮</button>
        <hr>
        <span>yibo的年龄</span>
        <input type="text" v-model='person.age'>
    </div>
    <script src='./vue.js'></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age: 15,
                colorVal: 50,
                person: {
                    name: 'yibo',
                    age: 24
                }
            },
            watch: {
                //侦听器的函数形式
                // 函数的名字就是监听的数据
                // 两个参数：newAge,oldAge
                age(newAge, oldAge) {
                    console.log(newAge, oldAge);
                    if (newAge == 69) {
                        console.log('偷袭' + newAge + '岁的老同志');
                    } else if (newAge >= 18) {
                        console.log('你已经是个成年人了，可以做一些成年人做的事情了....');
                    }
                },
                colorVal(val) {
                    if (val < 60) {
                        alert('王一博非要跟我合拍')
                    } else if (val == 80) {
                        alert('王一博和我官宣啦~')
                    } else if (val == 90) {
                        alert('王一博的微博沦陷')
                        this.weiboDown()
                    } else if (val == 100) {
                        alert('王一博和我幸福美满的生活在一起啦')
                    }
                },
                //对象的形式，可以深度监听
                person: {
                    handler(val) { //handler是属性名，不是变量名
                        console.log(val.age);
                    },
                    deep: true //深度监听属性
                }

            },
            methods: {
                beBeautiful() {
                    this.colorVal += 5;
                },
                weiboDown() {
                    alert('王一博的微博沦陷了')
                },
            }
        })
    </script>
</body>

</html>